<!--
 * @Author: 九璃怀特 1599130621@qq.com
 * @Date: 2022-10-18 15:40:48
 * @LastEditors: 九璃怀特 1599130621@qq.com
 * @LastEditTime: 2022-10-24 09:56:26
 * @FilePath: \nonogram\src\components\ColorPicker\ColorPicker.vue
 * @Description: 
 -->
<template>
  <div class="picker-btn" ref="pickerBtn">
    <div class="btn" :style="{ background: Color }" @click.stop="pickerShow">
      <span>
        <slot></slot>
      </span>
    </div>
  </div>
  <Teleport to="body">
    <div
      :id="`ID-${IDcode}-${idIndex}`"
      ref="picker"
      :style="{ top: `${pickerTop}px`, left: `${pickerLeft}px` }"
    >
      <template v-for="(item, index) in colors" :key="index">
        <div class="colorItem">
          <div
            class="btn"
            :style="{ background: item }"
            @click="setColor(item)"
          ></div>
        </div>
      </template>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
const props = defineProps<{ IColor: string; NColor?: string }>();
const colors = [
  "#000000",
  "#6495ED",
  "#7FFFAA",
  "#32CD32",
  "#FFFF00",
  "#87CEFA",
  "#000080",
  "#DC143C",
  "#D4F2E7",
  "#0000FF",
  "#FF0000",
  "#008080",
];
const Color = ref(props.IColor);
const pickerBtn = ref<HTMLDivElement>();
const picker = ref<HTMLDivElement>();
const IDcode = (Math.random() * 100000).toFixed(0);

document.addEventListener("click", (e) => {
  const dom = document.getElementsByClassName("picker");
  for (let i = 0; i < dom.length; i++) {
    dom[i].className = "";
  }
});
function setColor(color: string) {
  if (color == props.NColor) return;
  Color.value = color;
}

const pickerTop = ref(0);
const pickerLeft = ref(0);
function pickerShow() {
  const dom = document.getElementsByClassName("picker");
  const name = picker.value!.className;
  for (let i = 0; i < dom.length; i++) {
    dom[i].className = "";
  }
  if (!name) {
    picker.value!.className = "picker";
  }
}
const BtnObserve = new ResizeObserver(() => {
  const position = pickerBtn.value!.getBoundingClientRect();
  pickerTop.value = position.y + position.height - 2;
  pickerLeft.value = position.x;
});
defineExpose({
  Color,
});
const BefoWidth = ref();
const idIndex = ref(0);
onMounted(() => {
  BtnObserve.observe(document.body);
  const d = document.getElementsByClassName("picker-btn");
  const p: HTMLDivElement[] = [];
  for (let i = 0; i < d.length; i++) {
    const e = d[i] as HTMLDivElement;
    p.push(e);
  }
  idIndex.value = p.indexOf(pickerBtn.value!);
  BefoWidth.value = pickerBtn.value!.offsetWidth - 4;
});
onUnmounted(() => {
  BtnObserve.unobserve(document.body);
});
</script>

<style scoped lang="less">
.picker-btn {
  width: 40px;
  min-width: 40px;
  height: 40px;
  display: inline-block;
  box-sizing: border-box;
  padding: 3px;
  border: 2px solid black;
  background-color: white;
  position: relative;
  .btn {
    width: 100%;
    height: 100%;
    border: 1px solid rgb(144, 147, 153);
    box-sizing: border-box;
    cursor: pointer;
    span {
      // filter: invert(100%);
      display: flex;
      width: 100%;
      height: 100%;
      color: white;
      font-weight: bold;
      justify-content: center;
      align-items: center;
    }
  }
}

.picker {
  z-index: 99;
  width: 240px;
  height: 80px;
  background-color: white;
  position: absolute;
  top: -2px;
  border: 2px solid black;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50% 50%;
  &::before {
    content: "";
    width: 36px;
    height: 2px;
    background-color: white;
    position: absolute;
    top: -2px;
  }
  .colorItem {
    background-color: white;
    padding: 4px;
    .btn {
      width: 100%;
      height: 100%;
      border: 1px solid rgb(144, 147, 153);
      box-sizing: border-box;
      border-radius: 3px;
      cursor: pointer;
    }
  }
}
</style>
